<template>
  <view class="wh_750 pageHeight flex flex-column align-center justify-center bg_F5F5F5">
    <s-header-title ref="headerTitle" isDisplayBack title="个人资料" is-fixed background="#FFFFFF"
                  @getPageHeight="getPageHeight"></s-header-title>
    <view :style="{height:page.pageHeight + 'px'}"></view>
    <single-gap title="头像" margin="25rpx 0 0 0" @elementClick="goAvatarList">
      <view class="personalData_avatar flex align-center justify-end">
        <image-avater :src="`${IMG_URL}${userInfo.avatar}`" :width="76" :height="76" class="mr_15"></image-avater>
        <text class="iconfont icon-ic_rightarrow fs_26"></text>
      </view>
    </single-gap>
    <single-gap title="姓名" margin="25rpx 0 0 0" @elementClick="openNamePopup">
      <view class="personalData_avatar flex align-center justify-end">
        <text class="personalData_avatar_text mr_15" v-if="userInfo.nickname">
          {{ userInfo.nickname }}
        </text>
        <text class="personalData_avatar_text mr_15" v-else>
          未设置
        </text>
        <text class="iconfont icon-ic_rightarrow fs_26"></text>
      </view>
    </single-gap>
    <single-gap title="生日" margin="25rpx 0 0 0" @elementClick="openBetterCalendar">
      <view class="personalData_avatar flex align-center justify-end">
        <text class="personalData_avatar_text mr_15" v-if="!!userInfo.birthday" :style="{
              color:userInfo.time_type == 2 ? '#000000' : '#9F9F9F'
            }">
          {{ dayjs(userInfo.birthday).format('YYYY年MM月DD日') || '未设置' }}
        </text>
        <text class="personalData_avatar_text mr_15" v-if="!!userInfo.birthday" :style="{
              color: userInfo.time_type == 1 ? '#000000': '#9F9F9F'
            }">
          {{ userInfo.birthday || '未设置' }}
        </text>
        <text class="personalData_avatar_text mr-15"
              v-if="!userInfo.birthday && !userInfo.lunar_time">
          {{ userInfo.birthday || '未设置' }}
        </text>
        <text class="iconfont icon-ic_rightarrow fs-26"></text>
      </view>
    </single-gap>
  </view>
</template>

<script setup>
  import HeaderTitle from '@/pages/user/components/headerTitle.vue';
  import { computed, reactive } from 'vue';
  import dayjs from 'dayjs';
  import SingleGap from '@/pages/user/components/singleGap.vue';
  import ImageAvater from '@/sheep/components/s-avatar/s-avatar.vue';
  import sheep from '@/sheep';

  const page = reactive({
    pageHeight: 0,
  });
  const nc_image = computed(() => sheep.$store('AI').nc_image);
  const userInfo = computed(() => sheep.$store('user').userInfo);

  function getPageHeight(number) {
    page.pageHeight = number;
  }
</script>

<style lang="scss" scoped>

</style>
